<!--
 * @Author: aliyun3129073295 1718324422@qq.com
 * @Date: 2022-10-24 09:27:14
 * @LastEditors: username 1718324422@qq.com
 * @LastEditTime: 2022-12-01 15:33:18
 * @FilePath: \xu_vue\src\view\DataScreening\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
       <div ref="chart" id="main"></div>
       <!-- <div ref="chartOne" id="mainOne"></div>
       <div ref="chartTwo" id="mainTwo"></div> -->
    </div>
</template>

<script>
import * as echarts from 'echarts';
var myChart
var myChartOne
var myChartTwo
export default {
        name:'dataScreeing',
        data(){
            return{
                data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        },
        methods:{
            brokenLineOne(){
            if (myChart != null && myChart != "" && myChart != undefined) {
                myChart.dispose();//销毁
            }
            var chartDom = document.getElementById('main');
             myChart = echarts.init(chartDom);
            var option;

            option = {
                // 标题
                title: {
                text: '浏览趋势', // 文本属性
                // subtext:'1278', // 副标题 也可以加超链接 sublink
                link:'http://www.baidu.com', //添加超链接
                textStyle:{
                    fontSize:'15px',
                    width:'100px',
                    height:'100px'
                    // color:'red'
                }, // 标题背景样式

                left:'7%' ,
                top:'1%',
            },
            xAxis: {
                type: 'category', // 坐标轴类型
                // name:'dhsjahksa', // 坐标轴名称
                data: this.data,
                // 坐标轴名称样式 name
                nameTextStyle:{
                    // color:'red'
                },
                // 坐标轴最小刻度min 和最大刻度
                minInterval:'1',//坐标轴最小间距 为整数显示 在数值轴value和时间轴time中显示
                axisTick:{
                    inside:'true', //x轴的刻度默认朝外false
                    // length:'7'  
                    //刻度线颜色样式
                    lineStyle:{
                       color:'red'
                    }
                },
                

            },
            //图例组件
            legend: {
                type:'plain', // plain普通图例 scroll滚动翻页图例
                data: ['SASS发单',],
                left:'center',
                textStyle:{
                    color:'red'
                }
            },
            lineStyle:{
              color:'red'
            },
            grid:{
                // show:'true', // 显示直角坐标系网络
                left:'10%', //grid组件里容器左侧的距离,
                height:'auto',
                // backgroundColor:'red' //图背景色 必须配合show:true使用才能生效

            },
            // 是否显示提示组件
            tooltip:{
              trigger:'axis', // ‘item 散点图饼状图 axis 坐标轴柱状图折线图 none 什么都不提示
              // 坐标指示器配置
              axisPointer:{
                type:'line', // 指示器类型 line直线 shadow阴影 none无 cross十字交叉
                label:{
                    //x轴文字及背景样式
                //    show:true,
                //    color:'red'
                //    fontWeight:'bolder',
                //    textBorderType:'dashed'
                },
                //type为line时生效
                lineStyle:{
                    // 提示的线的样式
                    width:'4',
                    color:'red',
                    cap:'round' //指定线段末端的绘制形式 butt方形 round圆形 aquare
                },
                // type为shadow生效
                shadowStyle:{

                },
                // type为cross生效
                crossStyle:{

                },
                // 是否开启动画
                animation:{
                    show:true
                }
              },
              //提示框浮层的样式
              textStyle:{
                 color:'red'
              }
              
            },
            //极坐标系
            // radiusAxis:{

            // },
            // toolbox timeliane
            yAxis: {
                type:'value',
                axisTick: {
                length: 8,
                }
            },
            series: [
                {
                data: [150, 230, 224, 218, 135, 147, 310],
                type: 'line',
                name:'SASS发单',
                //配置线条颜色
                // itemStyle:{
                //     color:'yellow'
                // }
                // 说明图形的数据
                label:{
                  show:'true',
                  rotate:'3'
                }
                }
            ]
            };

            option && myChart.setOption(option);
            },
            brokenLineTwo(){
            if (myChartOne != null && myChartOne != "" && myChartOne != undefined) {
                myChartOne.dispose();//销毁
            }
            var chartDom = document.getElementById('mainOne');
            myChartOne = echarts.init(chartDom);
            var option;

            option = {
                title: {
                text: '报名趋势',
                textStyle:{
                    fontSize:'15px'
                },
                // left:'10%'
            },
            xAxis: {
                type: 'category',
                data: this.data
            },
            legend: {
                data: ['SASS发单',]
            },
            yAxis: {
                type:'value',
                axisTick: {
                length: 8,
              
                }
            },
            series: [
                {
                data: [150, 230, 124, 218, 235, 347, 210],
                type: 'line',
                name:'SASS发单',
                //配置线条颜色
                // itemStyle:{
                //     color:'yellow'
                // }
                }
            ]
            };

            option && myChartOne.setOption(option);
            },
            brokenLineThree(){
            if (myChartTwo != null && myChartTwo != "" && myChartTwo != undefined) {
                myChartTwo.dispose();//销毁
            }
            var chartDom = document.getElementById('mainTwo');
            myChartTwo = echarts.init(chartDom);
            var option;

            option = {
                title: {
                text: '接单趋势',
                textStyle:{
                    fontSize:'15px'
                }
            },
            xAxis: {
                type: 'category',
                data:this.data
            },
            legend: {
                data: ['SASS发单',]
            },
            yAxis: {
                type:'value',
                axisTick: {
                length: 8,
              
                }
            },
            series: [
                {
                data: [150, 230, 124, 218, 235, 347, 210],
                type: 'line',
                name:'SASS发单',
                //配置线条颜色
                // itemStyle:{
                //     color:'yellow'
                // }
                }
            ]
            };

            option && myChartTwo.setOption(option);
            }
        },
        mounted(){
        
            this.brokenLineOne(),
            this.brokenLineTwo(),
            this.brokenLineThree()
        },
        created(){
            console.log(this.$ad);
        }
}

</script>

<style  scoped>
#main{
    width: 1054px;
    height: 400px;
    margin: 100px auto;
}
#mainOne{
    width: 1054px;
    height: 400px;
    margin: 0px auto;
}
#mainTwo{
    width: 1054px;
    height: 400px;
    margin: 0px auto;
}
.top{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}
.top .left{
    display: flex;
    align-items: center;
    width: 300px;
    height: 140px;
    line-height: 20px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgba(52, 184, 192, 100);
}
.desc{
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangTC-Semibold;
    margin-left: 20px;
}
.num{
    width: 96px;
    height: 40px;
    color: rgba(52, 184, 192, 1);
    font-size: 28px;
    text-align: left;
    line-height: 40px;
    font-family: PingFangTC-Semibold;
    margin-left: 36px;
}
.look{
    text-align: left;
    width: 100px;
    height: 110px;
    margin-left: 200px;

}
</style>